<template>
    <div class="_comment">
        <div class="header">
            <div class="header-btnLeft"  @click="$router.go(-1)"><img src="../assets/back-btn.png"></div>
            <h1 class="header-title">评价商品</h1>
            <div class="header-btnRight"></div>
        </div>
        <div class="h30"></div>
        <div class="head">
            <div class="head-title">{{title}}…</div>
            <div class="head-desc">出游时间：{{creattime}}</div>
            <div class="head-desc">数量：
                <span v-for="item in person">
                    {{item.person_name}}×{{item.person_num}}
                </span>
            </div>
            <div class="head-price">¥ {{original_money}}</div>
        </div>
        <div class="h30"></div>
        <div class="input-item">
            <textarea maxlength="300"  @input="contentFun"  v-model="content" class="input-item-textarea" :placeholder="commentTips" />
            <!-- <span class='input-item-string'>{{content_length}}/{{content_length_max}}</span> -->
            <span class='input-item-tips' v-html="comment_state"></span>
        </div>

        <div class="camera">
            <div class="camera-list">
                <div class="camera-list-item file">
                    <img  class="camera-list-item-img"  src="../assets/camera.png">
                    <input class="camera-list-item-file"  name="file" type="file" accept="image/*"  multiple="multiple"    @change="updateImg"/>
                </div>
                <div class="camera-list-item" v-for="(item,index) in imgs">
                    <img class="camera-list-item-img" :src="/^(http|https):\/\//.test(item.src) ? item.src : url+item.src">
                    <img  class="camera-list-item-close" @click="removeImgs(index)"  src="../assets/camera-close.png"  >
                </div>
            </div>
        </div>

        <div class="bar" id="barInfo">
            <div class="bar-integral">
                晒评价可获得 <span class="markedness">100</span> 元红包奖励
            </div>
            <div class="bar-integral">
                参与评价可获得 <span class="markedness">{{integral}}</span> 积分回赠
            </div>
            <div class="bar-item"><button @click="postComment" class="bar-item-btn">确认提交</button></div>
        </div>

    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    import axios from 'axios';
    import storage from '../store/localstorage';
    import config from '../store/config';
    export default {
        name: "CommentAdd",
        data() {
            return {
                url:config.url,
                goods_id:0,
                order_id: 0,
                integral:1,//评论积分
                content:'',
                title:'',
                creattime:'',
                person:'',
                original_money:'',
                content_length: 0, //评论长度
                content_length_max:300, //评论最大长度
                imgs:[], //上传成功的图片地址
                commentTips:"这场说走就走的旅行满足你的期待吗？ \n有什么想跟我们说的吗？\n夸夸它或者说一下它美中不足的地方？",
                comment_state: "在写<span class='markedness'> 10 </span>字，就有机会赢红包",
                order_no:'',
                ticketCount:'',
            }
        },
        methods: {
            // 提交评论
            postComment(){
                var params={
                    goods_id:this.goods_id,
                    order_id:this.order_id,
                    order_no:this.order_no,
                    content:this.content,
                    content_img:JSON.stringify(this.imgs),
                    integral:this.integral
                }
                if(this.content_length <10){
                    Toast({message: `再写${10-this.content_length}字就有机会赢红包~`, duration: 1000});
                    return;
                }
                this.axios.post('/wap/member/evaluateAdd',params)
                    .then(res => {
                        Toast({message: res.msg, duration: 1000});
                        setTimeout(()=>{
                            // this.$router.push('/comment-success')
                            this.$router.push({ name: 'comment-success', query: { comment_id: res.cuowu,goods_id:this.goods_id}});
                        },1000)
                    })
                    .catch(err => console.log(err));
            },
            //上传图片
            updateImg(e){
                if(e.target.files){
                    for (let i = 0; i < e.target.files.length; i++) {
                        let file = e.target.files[i];
                        let param = new FormData(); //创建form对象
                        param.append('file',file,file.name);//通过append向form对象添加数据
                        param.append('chunk','0');//添加form表单中其他数据
                        //console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
                        let config = {
                            headers:{'Content-Type':'multipart/form-data'}
                        };  //添加请求头
                        axios.post('api/common/upload',param,config)
                            .then(res=>{
                                if(res.data.code==0){
                                    this.imgs.push({src:res.data.src})
                                }else{
                                    Toast({message: res.data.msg, duration: 1000});
                                }
                            })
                    }
                }else{
                    return
                }
            },
            removeImgs(index){
                var imgs=this.imgs;
                    imgs.splice(index,1)
                this.imgs=imgs;
            },
            contentFun() {
                var len = parseInt(this.content.length);
                if (len >= 10) {
                    this.comment_state = `已写<span class='markedness'> ${len} </span>字，晒出既可得红包`;
                }else{
                    this.comment_state = `在写<span class='markedness'> ${(10-len)} </span>字，就有机会赢红包`;
                }
                //最多字数限制
                if (len >= this.content_length_max) {
                    Toast({message: '评论长度不能大于300', duration: 1000});
                    return;
                }
                this.content_length= len; //当前字数
            },
            getData(){
                let _that = this;
                let params = {
                    order_id: _that.order_id,
                }
                _that.axios.post('/wap/member/orderevaluate', params)
                    .then(res => {
                        _that.title=res.data.goods_name;
                        _that.creattime= res.data.creattime;
                        _that.person=res.data.person;
                        _that.original_money=res.data.original_money;
                        _that.order_no=res.data.order_no;
                    })
                    .catch(err => console.log(err));
            }
        },
        mounted(){
            this.goods_id=this.$route.params.goods_id;
            this.order_id=this.$route.params.order_id;
            if(storage.get('comment_integra')){
                this.integral=storage.get('comment_integra').integra;
            }
            this.getData()
            let that = this;
            // 处理安卓机型键盘顶起
            var h = document.body.scrollHeight;
            window.onresize = function(){
                if (document.body.scrollHeight < h) {
                    document.getElementById("barInfo").style.display = "none";
                }else{
                    document.getElementById("barInfo").style.display = "block";
                }
            };
        }
    }
</script>

<style lang="scss">

    @import "../assets/base";

    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(200);
        background: $bgcolor1;
    }


    ._comment{
        background: $bgcolor1;
        height: 100%;
    }
    ._comment .markedness{
        color: #EB9D65!important;
    }
    ._comment .header{
        display: flex;
        align-items: center;
        padding: rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
        &-btnLeft{
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);
            img{
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight:after{
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }
        &-title{
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }

    }


    ._comment .head{
        padding: rpx(30);
        background: $color0;
        position: relative;
        &-title{
            font-size: rpx(30);
            line-height: 160%;
            padding-bottom: rpx(10);
        }
        &-desc{
            line-height: 130%;
            font-size: rpx(24);
            color: $color5;
        }
        &-price{
            position: absolute;
            right: rpx(30);
            bottom: rpx(30);
            font-size: rpx(40);
            font-weight: bold;
            color: $color3;
        }

    }

    ._comment .input-item{
        background: $color0;
        // padding: rpx(30) rpx(30) rpx(60);
        padding: rpx(30);
        border-bottom:solid 1px $color2;
        position: relative;
        &-textarea{
            font-size: rpx(30);
            width: 100%;
            height: rpx(240);
        }
        &-textarea::-webkit-input-placeholder {
            font-size: rpx(26);
            color: #999;
        }
        &-string{
            position: absolute;
            right: rpx(40);
            bottom: rpx(40);
            color: $color5;
            font-size: rpx(24);
        }
        &-tips{
            position: absolute;
            right: rpx(40);
            bottom: rpx(10);
            color: $color5;
            font-size: rpx(24);


        }
    }



    ._comment .camera{
        background: $color0;
        padding: rpx(30) rpx(10) rpx(10) rpx(30);
        margin-bottom: rpx(400);
        &-list{
            display: flex;
            flex-wrap: wrap;
            &-item{
                margin-bottom: rpx(20);
                margin-right: rpx(20);
                position: relative;
                &-img{

                    width: rpx(150);
                    height: rpx(150);
                    z-index: 1;
                }
                &-close{
                    position: absolute;
                    right: rpx(-16);
                    top: rpx(-16);
                    width: rpx(32);
                    height: rpx(32);
                }
                &-file{
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    opacity: 0;
                    z-index: 2;
                }
                &.file{
                    width: 25%;
                    overflow: hidden;
                    position: relative;

                }
            }
        }

    }


    //底部
    ._comment .bar{
        position: fixed;
        z-index: 9999;
        left: 0;
        right: 0;
        bottom: 0;
        border-top:$color2 solid 1px;
        background: $color0;

        &-integral{
            padding: rpx(20) rpx(30);
            background: $color0;
            border-bottom:$color2 solid 1px;
            font-size: rpx(28);
            color: $color5;
            &-green{
                color: $color4;
            }
        }
        &-item{
            padding: rpx(30) rpx(20);
            &-btn{
                border-radius: $radius6;
                border:none;
                box-sizing: border-box;
                width: 100%;
                height: rpx(80);
                line-height: rpx(80);
                background: $color3;
                color: $color0;
                font-size: rpx(34);
                text-align: center;
            }
        }




    }


</style>